<template>
  <div>
    <input v-model="input" v-maxLength="10" type="text" />
    <textarea v-model="text" v-maxLength="30" name id cols="30" rows="10"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      text: ""
    };
  },
  directives: {
    maxLength: {
      inserted(el, binding) {
        let wiper = document.createElement("div");
        wiper.className = "box";
        el.parentNode.replaceChild(wiper, el);
        let tip = document.createElement("span");
        tip.className = "span";
        tip.innerHTML = `0/${binding.value}`;
        wiper.appendChild(el);
        wiper.appendChild(tip);
        el.setAttribute("maxlength", binding.value);
      },
      update(el, binding) {
        let tipSpan = el.parentNode.querySelector(".span");
        tipSpan.innerHTML = `${el.value.length}/${binding.value}`;
        if (el.value.length == binding.value) {
          el.style.color = "red";
        } else {
          el.style.color = "black";
        }
      }
    }
  }
};
</script>

<style>
.box {
  display: inline-block;
  position: relative;
}

.span {
  position: absolute;
  right: 3px;
  bottom: 1px;
}
</style>